<template>
    <div class="video-page">
        <Header class="header"/>
        <div class="common_container">
            <div class="content-body">
                <div class="video-display">
                    <div id="video" style="width:100%;height:100%"></div>
                </div>
                <div class="video-content">
                    <div class="content-title">
                        <a :href="`/search?wd=${video_info.title}`">
                            <span class="content-title">{{video_info.title}} </span>
                        </a>
                        <span class="content-other_title"> 又名: {{video_info.other_title}}</span>
                        <span class="content-type">{{video_info.category_name}}</span>
                    </div>
                    <div class="content-row">
                        评分: <span class="content-score">{{video_info.score}}</span>
                    </div>
                    <div class="content-row">
                        <span class="content-item">
                            导演: <span style="margin-right: 10px" v-for="name in video_info.get_directors">{{name}}</span>
                        </span>
                        <span class="content-item">
                            演员: <span style="margin-right: 10px" v-for="name in video_info.get_casts">{{name}}</span>
                        </span>
                    </div>
                    <div class="content-row">
                        <span class="content-item">地区: {{video_info.region_name}}</span>
                        <span class="content-item">年代: {{video_info.period_name}}</span>
                        <span class="content-item">类型:
                            <span v-for="name in video_info.types_name">{{name}}、</span>
                        </span>
                    </div>
                    <div class="content-row">
                        <span>简介: {{video_info.desc}}</span>
                    </div>
                    <div class="content-row" v-if="video_info.category_name === '电影'">
                        <a :href="`/video/${video_info.id}?pk=${section_pk}`" v-for="(section_pk,i) in video_info.get_section_pks">
                            <div class="section-link" :class="section_pk ==section_id ? 'select-link':''">
                                {{section_info.name}}
                                <span style="margin-left: 10px;font-size: 12px">{{video_info.sections_status}}</span>
                            </div>
                        </a>
                    </div>
                    <div class="content-row" v-else-if="video_info.category_name === '综艺'">
                        <div class="content-section">剧集：{{video_info.sections_status}}</div>
                        <a :href="`/video/${video_info.id}?pk=${section_pk}`" v-for="(section_pk,i) in video_info.get_section_pks">
                            <div class="section-link" :class="section_pk ==section_id ? 'select-link':''">
                                <div class="card">
                                    <img :src="section_info.image_url" alt="">
                                </div>
                                <div class="card-text">
                                    {{section_info.pub_time}}期
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="content-row" v-else>
                        <div class="content-section">剧集：{{video_info.sections_status}}</div>
                        <a :href="`/video/${video_info.id}?pk=${section_pk}`" v-for="(section_pk,i) in video_info.get_section_pks">
                            <div class="section-link" :class="section_pk ==section_id ? 'select-link':''">
                                {{i+1}}
                            </div>
                        </a>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>

    // 导入外部js
    import "../assets/js/ckplayer"

    import Header from "../components/Header"

    export default {
        name: "Video",
        data() {
            // 如果要退出，就给发当前记录给后端
            window.onbeforeunload = (event) =>{
                this.save_play_record()
            };
            return {
                video_id: "",  // 视频信息主键
                section_id: "", // 剧集主键
                section_info: {"link": "http://q233bpn44.bkt.clouddn.com/common.mp4"}, // 剧集信息
                video_info: {}, // 视频信息
                // 用户数据
                user_data: this.$cookies.get("user_info"),
                player : "",
            }
        },
        methods: {
            get_video_pk() {
                // 获取地址栏上面的课程ID
                this.video_id = this.$route.params.pk;
                this.section_id = this.$route.query.pk;
                if (!this.video_id) {
                    this.$alert("非法操作，视频不存在！", "警告", {
                        callback() {
                            window.open("/", "_self")
                        }
                    });
                } else {
                    this.get_video_sections();
                }
            },
            get_video_sections() {
                let header = {};
                if(this.$cookies.get("token")){
                    header = {"AUTHORIZATION" : 'JWT '+this.$cookies.get("token") } // 请求token
                }

                // 获取视频
                this.$axios({
                    url:`${this.$settings.base_url}/video/section/${this.video_id}`,
                    method: "post",
                    headers: header,
                    data: {
                        "pk": this.section_id,  // 请求参数,剧集主键
                    }
                }).then(response => {
                    if(!response.data.v_id){
                        this.$alert(response.data.results, {
                            callback() {
                                window.open("/storage", "_self")
                            }
                        });
                    }
                    else{
                        this.section_info = response.data;
                        this.section_id = response.data.v_id;
                        this.video_info = response.data.video;
                    }

                }).catch(() => {
                    this.$message({
                        message: "获取电影信息有误，请联系客服工作人员",
                    })
                })
            },
            // 保存播放历史
            save_play_record(){
                let header = {};
                if(this.$cookies.get("token")){
                    header = {"AUTHORIZATION" : 'JWT '+this.$cookies.get("token") } // 请求token
                }

                //获取视频
                this.$axios({
                    url:this.$settings.base_url+"/video/save/record",
                    method: "post",
                    data:{
                        play_time: this.player.time,
                        section_id : this.section_id
                    },
                    headers: header,
                }).then(response => {
                    this.$message({
                        message: response.data,
                    });
                    console.log(response.data)
                }).catch((response) => {
                    this.$message({
                        message: response.error,
                    })
                });
            }
        },
        components: {
            Header,
        },
        beforeCreate() {
            document.querySelector('body').setAttribute('style', 'background-color:#16161a')
        },
        beforeDestroy() {
            document.querySelector('body').removeAttribute('style')
        },
        created() {
            this.get_video_pk();
        },
        // 在渲染完组件在执行js
        watch: {
            "section_info": function () {
                var videoObject = {
                    container: '#video',//“#”代表容器的ID，“.”或“”代表容器的class
                    variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象
                    flashplayer: false,//如果强制使用flashplayer则设置成true
                    // video: this.section_info.link, //视频地址
                    video: [
                        [this.section_info.link, 'video/mp4', '标清', 0],
                        [this.section_info.link, 'video/mp4', '高清', 10],
                    ],
                    seek: this.section_info.play_time,
                };
                this.player = new ckplayer(videoObject);
                // 监听播放时间
                // this.player.addListener('time', this.timeHandler);
            },
        },
    }

</script>

<style scoped>
    .video-page {

    }

    .header {
        background: #16161a;
        color: white;
        position: relative;
    }

    .common_container {
        margin: 0 130px;
    }

    .content-body {
        margin: 30px 0;
    }

    .video-display {
        margin: 20px auto;
        width: 100%;
        height: 540px;
    }
    .video-content{
        margin: 30px auto;
        color: hsla(0,0%,100%,.87);
    }

    .content-title{
        font-size: 24px;
        margin-bottom: 15px;
    }
    .content-other_title{
        margin-left: 15px;
        font-size: 20px;
    }
    .content-type{
        margin-left: 10px;
        font-size: 12px;
        font-weight: 200;
        padding: 0 3px;
        border: 1px solid #e0e0e0;
    }
    .content-score {
        /*position: absolute;*/
        /*top: 87%;*/
        /*left: 85%;*/
        color: #ff5711;
        font-size: 14px;
        font-weight: 700;
    }
    .content-row{
        margin: 5px 0;
    }
    .content-item{
        margin-right: 20px;
    }
    .content-section{
        font-size: 18px;
        margin: 5px 0;
    }
    .section-link{
        cursor: pointer;
        font-size: 18px;
        padding: 11px 22px;
        margin: 5px 18px 5px 0;
        display: inline-block;
        border-radius: 2px;
        border: white 1px solid;
        /*background: #333333;*/
        background: hsla(0,0%,100%,.87);
        color: #333333;
    }
    .select-link{
        background: #333333;
        color: #0d9bff;
        border: black 1px solid;
    }
    /*a{*/
    /*    color: hsla(0,0%,100%,.87);*/
    /*}*/
    a:hover {
        text-decoration: none;
        color: #0d9bff;
    }
    .card{
        border: 1px solid #EBEEF5;
        background-color: #FFF;
        color: #303133;
        -webkit-transition: .3s;
        transition: .3s;
        display: inline-block;
        margin-right: 5px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border-radius: 4px;
        overflow: hidden;
        width: 190px;
    }
    img{
        height: 100%;
        width: 100%;
    }
    .card-text{
        padding-left: 5px;
    }
</style>